<template>
	<div class="c-chartradio" :id="localUUID"></div>
</template>

<script>
import moment from "moment";
import { Chart, registerShape } from "@antv/g2";
import { createUUID } from "@/common/js/mUtils";
import componentRefresh from "@/mixins/componentRefresh";
//准备数据
const DATA = [];
export default {
	name: "CChartradio",
	data() {
		return {
			localUUID: createUUID(),
		};
	},
	mixins: [componentRefresh],
	props: {
		props: {
			type: Array,
			default: function() {
				return [
					{
						fields: [],
					},
				];
			},
		},
		width: {
			type: Number,
			default: 300,
		},
		height: {
			type: Number,
			default: 300,
		},
		ratio: {
			type: Number,
			default: 1,
		},
		uuid: String,
	},
	computed: {
		dataTrigger() {
			if (this.props[1].fields[0].value.dataJson.json) {
				let result = this.props[1].fields[0].value.dataJson.json;
				let dataobj = "{}";
				try {
					dataobj = JSON.parse(result);
				} catch (e) {
					console.warn(e);
					this.$message.error("JSON格式有误请重试");
					dataobj = {};
				}
				return dataobj;
			} else {
				return DATA;
			}
		},
		modelTrigger() {
			return this.props[1].fields[0].value.dataJson.model;
		},
		LegendTextColor() {
			return this.props[0].fields[3].value[0].value.value;
		},
		// LegendStyle() {
		// 	return this.props[0].fields[3].value[1].value.value;
		// },
		// LegendAlign() {
		// 	return this.props[0].fields[3].value[2].value.value;
		// },
		// LegendPosition() {
		// 	return this.props[0].fields[3].value[3].value.value;
		// },
		ChageColor() {
			return this.props[0].fields[3].value[1].value.value;
		},
		RowColor1() {
			return this.props[0].fields[3].value[2].value.value;
		},
		RowColor2() {
			return this.props[0].fields[3].value[3].value.value;
		},
		// msg() {
		// 	return this.props[0].fields[3].value[4].value.value;
		// },
	},
	watch: {
		dataTrigger(val) {
			if (val && this.chartInstance) {
				this.chartInstance.destroy();
				this.initData();
			}
		},
		modelTrigger() {
			if (this.chartInstance) {
				this.chartInstance.destroy();
				this.initData();
			}
		},
		LegendTextColor(val) {
			if (this.chartInstance) {
				this.chartInstance.destroy();
				this.initData();
			}
		},
		ChageColor() {
			if (this.chartInstance) {
				this.chartInstance.destroy();
				this.initData();
			}
		},
		RowColor1() {
			if (this.chartInstance) {
				this.chartInstance.destroy();
				this.initData();
			}
		},
		RowColor2() {
			if (this.chartInstance) {
				this.chartInstance.destroy();
				this.initData();
			}
		},
		// msg() {
		// 	if (this.chartInstance) {
		// 		this.chartInstance.destroy();
		// 		this.initData();
		// 	}
		// },
		width(val) {
			this.resizeChart();
		},
		height(val) {
			this.resizeChart();
		},
	},
	mounted() {
		this.initData();
	},
	methods: {
		initData() {
			let width = parseInt(this.width);
			let height = parseInt(this.height);
			this.initMapping();

			this.chartInstance = new Chart({
				container: this.localUUID,
				autoFit: false,
				width: width,
				height: height,
			});
			this.chartInstance.data(this.dataTrigger);

			let pos = `${this.mappings[1].field}`; //映射字段

			this.legend();
			this.chartInstance.tooltip({
				showMarkers: false,
			});
			let data =[]
			data = [this.dataTrigger[0]];
			let color;
			color = this.LegendTextColor;
			data.push({
				[this.mappings[0].field]: "其他",
				[this.mappings[1].field]:
					100 - this.dataTrigger[0][this.mappings[1].field],
			});
			this.chartInstance.data(data);
			this.chartInstance.coordinate("theta", {
				radius: 0.8,
				innerRadius: 0.75,
			});
			this.chartInstance
				.interval()
				.adjust("stack")
				.position(pos)
				.color(`${this.mappings[0].field}`, [color, this.ChageColor])
				.style({
					opacity: 1,
				});
			this.chartInstance.annotation().text({
				position: ["50%", "50%"],
				content: data[0][this.mappings[0].field],
				style: {
					fontSize: 22,
					fill: this.RowColor1,
					fontWeight: 300,
					textBaseline: "bottom",
					textAlign: "center",
				},
				offsetY: -12,
			});

			this.chartInstance.annotation().text({
				position: ["50%", "50%"],
				content: this.dataTrigger[0][this.mappings[1].field],
				style: {
					fontSize: 30,
					fill: this.RowColor2,
					fontWeight: 500,
					textAlign: "center",
				},
				offsetY: 10,
			});

			this.chartInstance.interaction("element-active");

			this.chartInstance.render();
		},
		initMapping() {
			let model = this.props[1].fields[0].value.dataJson.model;
			this.mappings = model.map((m) => {
				let field = m.field;
				let mapping = m.mapping;
				let key = mapping || field;
				return { field: key };
			});
			if (!this.props[1].fields[0].value.dataJson.json) {
				this.mappings = [
					{ field: "type" },
					{
						field: "value",
					},
				];
			}
		},
		resizeChart() {
			let width = parseInt(this.width);
			let height = parseInt(this.height);
			this.chartInstance.changeSize(width, height);
		},
		legend() {
			this.chartInstance.legend(false);
		},
	},
};
</script>

<style>
.c-chartcolumnar {
	width: 100%;
	height: 100%;
}
</style>
